<template>
  <div class="install">
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span>项目初始化</span>
        </div>
      </template>
      <div class="config-item">
        <span class="config-title">检测：环境</span>
        <div class="version-box">所需版本：<span class="go-version">go{{ installStore.versionConfig.goMixVersion }}+</span>(当前版本：<span class="go-version">{{ installStore.versionConfig.goVersion }}</span>)</div>
      </div>
      <div class="config-item">
        <span class="config-title">配置：redis</span>
        <el-input v-model="config.redisAddr" placeholder="请输入redis地址">
          <template #prepend>地址</template>
        </el-input>
        <el-input v-model="config.redisPass" placeholder="请输入redis密码">
          <template #prepend>密码</template>
        </el-input>
        <el-input v-model="config.redisDb" placeholder="请输入redis DB">
          <template #prepend>DB</template>
        </el-input>
      </div>
      <div class="config-item">
        <span class="config-title">配置：mysql</span>
        <el-input v-model="config.mysqlAddr" placeholder="请输入mysql地址">
          <template #prepend>地址</template>
        </el-input>
        <el-input v-model="config.mysqlUser" placeholder="请输入mysql用户">
          <template #prepend>用户</template>
        </el-input>
        <el-input v-model="config.mysqlPass" placeholder="请输入mysql密码">
          <template #prepend>密码</template>
        </el-input>
        <el-input v-model="config.mysqlName" placeholder="请输入mysql DB">
          <template #prepend>DB</template>
        </el-input>
      </div>
      <el-button type="primary" @click="executeInstall" :disabled="installStore.executeLoading">初始化项目</el-button>
    </el-card>
    <el-card  class="result-card">
       <template #header>
        <div class="card-header">
          <span>执行结果</span>
        </div>
      </template>
      <div class="result-box">
        <pre>配置结果：<br />{{ installStore.executeResult }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { useInstallStore } from '@/stores/install'
import { useRouter } from 'vue-router'
const installStore = useInstallStore()
const router = useRouter()

const config = reactive({
  redisAddr: '0.0.0.0:6379',
  redisPass: '',
  redisDb: 0,
  mysqlAddr: '0.0.0.0:3306',
  mysqlName: 'go_gin_api',
  mysqlUser: 'root',
  mysqlPass: '123456'
})

onMounted(() => {
  installStore.useInstall()
})

const executeInstall = () => {
  installStore.execute(config, () => {
    setTimeout(() => {
      router.push('/login')
    }, 1000);
  })
}

</script>

<style lang="less" scoped>
.install {
  padding: 10px;
  background-color: #eee;
  display: flex;
  .config-card {
    width: 50%;
    margin-right: 10px;
    .version-box {
      font-size: 14px;
      .go-version {
        color: #c86258;
      }
    }
  }
  .result-card {
    width: 50%;
    .result-box {
      font-size: 12px;
      background-color: #eee;
      padding: 10px;
      color: #4cafec;
    }
  }
  .config-item {
    margin-bottom: 20px;
    .config-title {
      display: inline-block;
      background-color: #3de9c1;
      color: #fff;
      padding: 2px 4px;
      border-radius: 2px;
      font-size: 12px;
      margin-bottom: 8px;
    }
    .el-input {
      margin-bottom: 10px;
    }
  }
}
</style>
